<template>
    <div>
      <pages-header
        ref="pageHeader"
        :title="$route.params.id ? '编辑积分商品' : '添加积分商品'"
        :backUrl="$routeProStr + '/marketing/store_integral/index'"
      ></pages-header>
      <el-card :bordered="false" shadow="never" class="mt16">
        <el-row class="mt30 acea-row row-middle row-center" v-loading="spinShow">
          <el-col :span="20">
            <steps :stepList="stepList" :isActive="current"></steps>
          </el-col>
          <el-col :span="23">
            <el-form
              class="form mt30"
              ref="formValidate"
              :model="formValidate"
              :rules="ruleValidate"
              @on-validate="validate"
              :label-width="labelWidth"
              :label-position="labelPosition"
              @submit.native.prevent
            >
              <el-form-item label="选择商品：" prop="image_input" v-if="current === 0">
                <div class="picBox" v-db-click @click="changeGoods">
                  <div class="pictrue" v-if="formValidate.image">
                    <img v-lazy="formValidate.image" />
                  </div>
                  <div class="upLoad acea-row row-center-wrapper" v-else>
                    <i class="el-icon-goods" style="font-size: 24px"></i>
                  </div>
                </div>
              </el-form-item>
              <el-col v-show="current === 1">
                <el-col :span="24">
                  <el-form-item prop="image">
                    <div class="custom-label" slot="label">
                      <div>
                        <div>商品主图</div>
                        <div>(750*750)</div>
                      </div>
                      <div>：</div>
                    </div>
                    <div class="picBox" v-db-click @click="modalPicTap('dan', 'danFrom')">
                      <div class="pictrue" v-if="formValidate.image">
                        <img v-lazy="formValidate.image" />
                      </div>
                      <div class="upLoad acea-row row-center-wrapper" v-else>
                        <i class="el-icon-picture-outline" style="font-size: 24px"></i>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item prop="images">
                    <div class="custom-label" slot="label">
                      <div>
                        <div>商品轮播图</div>
                        <div>(750*750)</div>
                      </div>
                      <div>：</div>
                    </div>
                    <div class="acea-row">
                      <div
                        class="pictrue"
                        v-for="(item, index) in formValidate.images"
                        :key="index"
                        draggable="true"
                        @dragstart="handleDragStart($event, item)"
                        @dragover.prevent="handleDragOver($event, item)"
                        @dragenter="handleDragEnter($event, item)"
                        @dragend="handleDragEnd($event, item)"
                      >
                        <img v-lazy="item" />
                        <i class="el-icon-circle-close btndel" v-db-click @click="handleRemove(index)"></i>
                      </div>
                      <div
                        v-if="formValidate.images.length < 10"
                        class="upLoad acea-row row-center-wrapper"
                        v-db-click
                        @click="modalPicTap('duo')"
                      >
                        <i class="el-icon-picture-outline" style="font-size: 24px"></i>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-col v-bind="grid">
                    <el-form-item label="商品标题：" prop="title" label-for="title">
                      <el-input
                        placeholder="请输入商品标题"
                        v-model="formValidate.title"
                        class="content_width"
                        maxlength="80"
                        show-word-limit
                      />
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="用户兑换数量限制：" prop="num">
                    <div class="acea-row row-middle">
                      <el-input-number
                        :controls="false"
                        :min="1"
                        :max="9999999999"
                        placeholder="请输入数量限制"
                        element-id="num"
                        :precision="0"
                        v-model="formValidate.num"
                        class="content_width"
                      />
                      <div class="ml10 grey">
                        每个用户可购买该商品总数限制。例如设置为4，表示本活动,每个用户最多可兑换总数4个
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="单位：" prop="unit_name" label-for="unit_name">
                    <el-input
                      placeholder="请输入单位"
                      element-id="unit_name"
                      v-model="formValidate.unit_name"
                      class="content_width"
                    />
                  </el-form-item>
                </el-col>
  
                <el-col :span="24">
                  <el-form-item label="排序：">
                    <el-input-number
                      :controls="false"
                      placeholder="请输入排序"
                      element-id="sort"
                      :precision="0"
                      v-model="formValidate.sort"
                      class="content_width"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="上架状态：" props="is_show" label-for="status">
                    <el-radio-group element-id="is_show" v-model="formValidate.is_show">
                      <el-radio :label="1" class="radio">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col v-bind="grid2">
                  <el-form-item label="热门推荐：" props="is_host" label-for="is_host">
                    <el-radio-group element-id="is_host" v-model="formValidate.is_host">
                      <el-radio :label="1" class="radio">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="规格选择：">
                    <el-table
                      ref="multipleTable"
                      :data="specsData"
                      border
                      :row-key="getRowKeys"
                      class="mt14"
                      highlight-current-row
                      @selection-change="changeCheckbox"
                    >
                      <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column>
                      <el-table-column
                        :label="item.title"
                        :min-width="item.minWidth"
                        v-for="(item, index) in columns"
                        :key="index"
                      >
                        <template slot-scope="scope">
                          <template v-if="item.key">
                            <div>
                              <span>{{ scope.row[item.key] }}</span>
                            </div>
                          </template>
                          <template v-else-if="item.slot === 'pic'">
                            <div
                              class="acea-row row-middle row-center-wrapper"
                              v-db-click
                              @click="modalPicTap('dan', 'danTable', scope.$index)"
                            >
                              <div class="pictrue pictrueTab" v-if="scope.row.pic">
                                <img v-lazy="scope.row.pic" />
                              </div>
                              <div class="upLoad pictrueTab acea-row row-center-wrapper" v-else>
                                <i class="el-icon-picture-outline" style="font-size: 24px"></i>
                              </div>
                            </div>
                          </template>
                          <template v-else-if="item.slot === 'price'">
                            <el-input-number
                              :controls="false"
                              v-model="scope.row.price"
                              :min="0"
                              :precision="0"
                              class="priceBox"
                              :active-change="false"
                            ></el-input-number>
                          </template>
                          <template v-else-if="item.slot === 'quota'">
                            <el-input-number
                              :controls="false"
                              v-model="scope.row.quota"
                              :min="1"
                              :max="scope.row.stock"
                              active-change
                              class="priceBox"
                            ></el-input-number>
                          </template>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-row v-show="current === 2">
                <el-col :span="24">
                  <el-form-item label="内容：">
                    <WangEditor
                      style="width: 90%"
                      :content="formValidate.description"
                      @editorContent="getEditorContent"
                    ></WangEditor>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-col :span="24">
                <el-form-item>
                  <el-button
                    class="submission"
                    v-db-click
                    @click="step"
                    :disabled="($route.params.id && current === 1) || current === 0"
                    >上一步
                  </el-button>
                  <el-button
                    :disabled="submitOpen && current === 2"
                    type="primary"
                    class="submission"
                    v-db-click
                    @click="next('formValidate')"
                    >{{ current === 2 ? '提交' : '下一步' }}</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <!-- 选择商品-->
      <el-dialog :visible.sync="modals" title="商品列表" class="paymentFooter" width="1000px">
        <goods-list ref="goodslist" @getProductId="getProductId"></goods-list>
      </el-dialog>
      <!-- 上传图片-->
      <el-dialog :visible.sync="modalPic" width="950px" title="上传商品图" :close-on-click-modal="false">
        <uploadPictures
          :isChoice="isChoice"
          @getPic="getPic"
          @getPicD="getPicD"
          :gridBtn="gridBtn"
          :gridPic="gridPic"
          v-if="modalPic"
        ></uploadPictures>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapState } from 'vuex';
  import goodsList from '@/components/goodsList/index';
  import WangEditor from '@/components/wangEditor/index.vue';
  import uploadPictures from '@/components/uploadPictures';
  import { integralAddApi, productAttrsApi, integralInfoApi } from '@/api/sign';
  import steps from '@/components/steps/index';
  
  export default {
    name: 'signStorelCreate',
    components: { goodsList, uploadPictures, WangEditor, steps },
    data() {
      return {
        submitOpen: false,
        spinShow: false,
        isChoice: '',
        current: 0,
        modalPic: false,
        grid: {
          xl: 12,
          lg: 20,
          md: 24,
          sm: 24,
          xs: 24,
        },
        grid2: {
          xl: 8,
          lg: 12,
          md: 12,
          sm: 24,
          xs: 24,
        },
        gridPic: {
          xl: 6,
          lg: 8,
          md: 12,
          sm: 12,
          xs: 12,
        },
        gridBtn: {
          xl: 4,
          lg: 8,
          md: 8,
          sm: 8,
          xs: 8,
        },
        task_id:0,
        myConfig: {
          autoHeightEnabled: false, // 编辑器不自动被内容撑高
          initialFrameHeight: 500, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器宽度
          UEDITOR_HOME_URL: '/UEditor/',
          serverUrl: '',
        },
        stepList: ['选择积分商品', '填写基础信息', '修改商品详情'],
        modals: false,
        modal_loading: false,
        images: [],
        formValidate: {
          images: [],
          info: '',
          title: '',
          image: '',
          unit_name: '',
          price: 0,
          ot_price: 0,
          cost: 0,
          sales: 0,
          stock: 0,
          sort: 0,
          num: 1,
          once_num: 1,
          give_integral: 0,
          postage: 0,
          section_time: [],
          is_postage: 0,
          is_hot: 0,
          status: 0,
          description: '',
          id: 0,
          product_id: 0,
          temp_id: '',
          time_id: '',
          attrs: [],
          items: [],
        },
        description: '',
        templateList: [],
        timeList: [],
        columns: [],
        specsData: [],
        picTit: '',
        tableIndex: 0,
        ruleValidate: {
          image: [{ required: true, message: '请选择主图', trigger: 'change' }],
          images: [
            {
              required: true,
              type: 'array',
              message: '请选择主图',
              trigger: 'change',
            },
            {
              type: 'array',
              min: 1,
              message: 'Choose two hobbies at best',
              trigger: 'change',
            },
          ],
          title: [{ required: true, message: '请输入商品标题', trigger: 'blur' }],
          info: [{ required: true, message: '请输入积分活动简介', trigger: 'blur' }],
          unit_name: [{ required: true, message: '请输入单位', trigger: 'blur' }],
          price: [
            {
              required: false,
              type: 'number',
              message: '请输入金额',
              trigger: 'blur',
            },
          ],
          ot_price: [
            {
              required: false,
              type: 'number',
              message: '请输入原价',
              trigger: 'blur',
            },
          ],
          cost: [
            {
              required: false,
              type: 'number',
              message: '请输入成本价',
              trigger: 'blur',
            },
          ],
          stock: [
            {
              required: true,
              type: 'number',
              message: '请输入库存',
              trigger: 'blur',
            },
          ],
          num: [
            {
              required: true,
              type: 'number',
              message: '请输入兑换数量限制',
              trigger: 'blur',
            },
          ],
          once_num: [
            {
              required: true,
              type: 'number',
              message: '请输入单次兑换数量限制',
              trigger: 'blur',
            },
          ],
        },
        copy: 0,
      };
    },
    computed: {
      ...mapState('media', ['isMobile']),
      labelWidth() {
        return this.isMobile ? undefined : '135px';
      },
      labelPosition() {
        return this.isMobile ? 'top' : 'right';
      },
    },
    mounted() {
      if(this.$route.query.task_id){
        this.task_id = this.$route.query.task_id
      }
      if (this.$route.params.id) {
        this.copy = this.$route.params.copy;
        this.current = 1;
        this.getInfo();
      }

    },
    methods: {
      getEditorContent(data) {
        this.description = data;
      },
      // 规格；
      productAttrs(rows) {
        let that = this;
        productAttrsApi(rows.id, 4)
          .then((res) => {
            let data = res.data.info;
            that.specsData = data.attrs;
            that.specsData.forEach(function (item, index) {
              that.$set(that.specsData[index], 'id', index);
            });
            that.formValidate.items = data.items;
            that.columns = data.header;
          })
          .catch((res) => {
            that.$message.error(res.msg);
          });
      },
      // 多选
      changeCheckbox(selection) {
        this.formValidate.attrs = selection;
      },
      // 表单验证
      validate(prop, status, error) {
        if (status === false) {
          this.$message.error(error);
        }
      },
      // 商品id
      getProductId(row) {
        this.modal_loading = false;
        this.modals = false;
        setTimeout(() => {
          this.formValidate = {
            images: row.slider_image,
            info: row.store_info,
            title: row.store_name,
            image: row.image,
            unit_name: row.unit_name,
            price: 0, // 不取商品中的原价
            ot_price: row.ot_price,
            cost: row.cost,
            sales: row.sales,
            stock: row.stock,
            sort: row.sort,
            num: 1,
            once_num: 1,
            give_integral: row.give_integral,
            postage: row.postage,
            section_time: [],
            is_postage: row.is_postage,
            is_host: 0,
            is_show: 1,
            description: row.description,
            id: 0,
            product_id: row.id,
            temp_id: row.temp_id,
          };
          this.productAttrs(row);
          this.$refs.goodslist.productRow = null;
        }, 500);
      },
  
      cancel() {
        this.modals = false;
      },
      // 具体日期
      onchangeTime(e) {
        this.formValidate.section_time = e;
      },
      // 详情
      getInfo() {
        this.spinShow = true;
        integralInfoApi(this.$route.params.id)
          .then(async (res) => {
            let that = this;
            let info = res.data.info;
            this.formValidate = info;
            this.$set(this.formValidate, 'items', info.attrs.items);
            this.columns = info.attrs.header;
            this.specsData = info.attrs.value;
            that.specsData.forEach(function (item, index) {
              that.$set(that.specsData[index], 'id', index);
            });
            let data = info.attrs;
            let attr = [];
            for (let index in info.attrs.value) {
              if (info.attrs.value[index]._checked) {
                attr.push(info.attrs.value[index]);
              }
            }
            that.formValidate.attrs = attr;
            attr.forEach((row) => {
              that.$refs.multipleTable.toggleRowSelection(row, true);
            });
            this.spinShow = false;
          })
          .catch((res) => {
            this.spinShow = false;
            this.$message.error(res.msg);
          });
      },
      getRowKeys(row) {
        return row.id;
      },
      // 下一步
      next(name) {
        let that = this;
        if (this.current === 2) {
          this.formValidate.description = this.description;
          this.$refs[name].validate((valid) => {
            if (valid) {
              if (this.copy == 1) this.formValidate.copy = 1;
              this.formValidate.id = Number(this.$route.params.id) || 0;
              this.submitOpen = true;
              this.formValidate.task_id = this.task_id
              integralAddApi(this.formValidate)
                .then(async (res) => {
                  this.submitOpen = false;
                  this.$message.success(res.msg);
                  setTimeout(() => {
                    this.$router.push({
                      path: this.$routeProStr + '/marketing/sign/createindex',
                    });
                  }, 500);
                })
                .catch((res) => {
                  this.submitOpen = false;
                  this.$message.error(res.msg);
                });
            } else {
              return false;
            }
          });
        } else if (this.current === 1) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              if (!that.formValidate.attrs) {
                return that.$message.error('请选择属性规格');
              } else {
                for (let index in that.formValidate.attrs) {
                  if (that.formValidate.attrs[index].quota <= 0) {
                    return that.$message.error('兑换次数必须大于0');
                  }
                }
              }
              this.current += 1;
            } else {
              return this.$message.warning('请完善您的信息');
            }
          });
        } else {
          if (this.formValidate.image) {
            this.current += 1;
          } else {
            this.$message.warning('请选择商品');
          }
        }
      },
      // 上一步
      step() {
        this.current--;
      },
      // 内容
      getContent(val) {
        this.formValidate.description = val;
      },
      // 点击商品图
      modalPicTap(tit, picTit, index) {
        this.modalPic = true;
        this.isChoice = tit === 'dan' ? '单选' : '多选';
        this.picTit = picTit;
        this.tableIndex = index;
      },
      // 获取单张图片信息
      getPic(pc) {
        switch (this.picTit) {
          case 'danFrom':
            this.formValidate.image = pc.att_dir;
            break;
          // case 'danTable':
          //     this.specsData[this.tableIndex].pic = pc.att_dir;
          //     break;
          default:
            if (!!this.formValidate.attrs && this.formValidate.attrs.length) {
              this.$set(this.specsData[this.tableIndex], '_checked', true);
            }
            this.specsData[this.tableIndex].pic = pc.att_dir;
        }
        this.modalPic = false;
      },
      // 获取多张图信息
      getPicD(pc) {
        this.images = pc;
        this.images.map((item) => {
          this.formValidate.images.push(item.att_dir);
          this.formValidate.images = this.formValidate.images.splice(0, 10);
        });
        this.modalPic = false;
      },
      handleRemove(i) {
        this.images.splice(i, 1);
        this.formValidate.images.splice(i, 1);
      },
      // 选择商品
      changeGoods() {
        this.modals = true;
        this.$nextTick((e) => {
          this.$refs.goodslist.formValidate.is_show = -1;
          this.$refs.goodslist.formValidate.type = 3;
          this.$refs.goodslist.getList();
          this.$refs.goodslist.goodsCategory();
        });
      }, // 移动
      handleDragStart(e, item) {
        this.dragging = item;
      },
      handleDragEnd(e, item) {
        this.dragging = null;
      },
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      handleDragOver(e) {
        e.dataTransfer.dropEffect = 'move'; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
      },
      handleDragEnter(e, item) {
        e.dataTransfer.effectAllowed = 'move'; // 为需要移动的元素设置dragstart事件
        if (item === this.dragging) {
          return;
        }
        const newItems = [...this.formValidate.images];
        const src = newItems.indexOf(this.dragging);
        const dst = newItems.indexOf(item);
        newItems.splice(dst, 0, ...newItems.splice(src, 1));
        this.formValidate.images = newItems;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .content_width {
    width: 460px;
  }
  .custom-label {
    display: inline-flex;
    line-height: 1.5;
  }
  .grey {
    color: #999;
  }
  .maxW ::v-deep .ivu-select-dropdown {
    max-width: 600px;
  }
  .tabBox_img {
    width: 50px;
    height: 50px;
    margin: 0 auto;
  }
  .tabBox_img img {
    width: 100%;
    height: 100%;
  }
  .priceBox {
    width: 100%;
  }
  .form {
    .picBox {
      display: inline-block;
      cursor: pointer;
    }
    .pictrue {
      width: 60px;
      height: 60px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      margin-right: 15px;
      display: inline-block;
      position: relative;
      cursor: pointer;
  
      img {
        width: 100%;
        height: 100%;
      }
      .btndel {
        position: absolute;
        z-index: 9;
        width: 20px !important;
        height: 20px !important;
        left: 46px;
        top: -4px;
      }
    }
    .upLoad {
      width: 58px;
      height: 58px;
      line-height: 58px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.02);
      cursor: pointer;
    }
  }
  </style>
  